<template>
  <div class="warpper-box">
    <div class="inner_box">
      <el-form :inline="true" size="small" :model="formInline" ref="formInline">
        <el-form-item label="移入时间" prop="time">
           <el-date-picker
            v-model="formInline.time"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item
        label="入库类别"
        prop="applyCategoryId"
      >
        <el-cascader
          placeholder="支持搜索，多选"
          filterable
          v-model="formInline.applyCategoryId"
          collapse-tags
          :options="treeData"
          :props="{multiple: true,emitPath: false}"
          clearable
        ></el-cascader>
      </el-form-item> -->
         <el-form-item label="公司名称" prop="name">
          <el-input v-model="formInline.name" placeholder="公司名称"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="contactPerson">
          <el-input
            v-model="formInline.contactPerson"
            placeholder="姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="contactPhone">
          <el-input
            v-model="formInline.contactPhone"
            placeholder="电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formInline.email" placeholder="邮箱"></el-input>
        </el-form-item>
         <el-form-item label="移入事由" prop="blacklistReason">
          <el-input v-model="formInline.blacklistReason" placeholder="模糊查询"></el-input>
        </el-form-item>
        <el-form-item label="解除时间" prop="removeBlacklistTime">
           <el-date-picker
            v-model="formInline.removeBlacklistTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="loadList(true)">搜索</el-button>
            <el-button type="primary" icon="el-icon-setting" @click="reset('formInline')">重置</el-button>
            <el-button type="primary" size="small" :disabled="tables.tableData.length == 0" @click="dataXlsx()">导出EXCEL</el-button>
        </el-form-item>
      </el-form>
      <supplier-common-list
       ref="createSupplier"
       :tableData="tables.tableData" 
       :tableLabel="tables.tableLabel"
       :models="tables" 
       :key="tableKey"
       @on-search-click="loadList"
       @on-detail-click="supplierDetailClick"
       @on-restore-click="restoreClick"
       />
    </div>

       <supplierDetail ref="createSupplierDetail" />

  </div>
</template>

<script>
import moment from "moment";
import { mapGetters, mapActions } from "vuex";
import { supplierPageFind, getSupplierCategoryTree,supplierOutBlacklist } from "@/api/supplier_api";
import { checkEmail, checkPhone, TreeArrar } from "@/utils/index";
import { SUPPLIER_BLACKLIST_LABEL } from "@/views/supplier/supplierModel/config";
import supplierCommonList from "@/views/supplier/supplierModel/supplier_common_list.vue"
 import supplierDetail from '@/views/supplier/supplierModel/supplier_detail.vue'
export default {
  components: {
        supplierCommonList,
    supplierDetail
  },
  data() {
    return {
      formInline: {
        name: "",
        applyCategoryId:"",
        contactPerson: "",
        contactPhone: "",
        email: "",
            time: [],
        removeBlacklistTime: "",
        blacklistReason:""
      },
      treeData:[],
      tableKey: 0,
      tables:{
        total: 0,
        isStore:true,
        tableData: [],
        tableLabel:SUPPLIER_BLACKLIST_LABEL
      },
      models: {
        pageNum: 1,
        pageSize: 10
        }
    };
  },
  computed: {
    ...mapGetters(["findType"])
  },
  mounted() {
    this.loadList(true);
   // this.categoryList()
  },
  methods: {
    async categoryList() {
        const { code, data } = await getSupplierCategoryTree();
      if (code == 200) {
       if (data && data.length) {
          let NewData = data.map((ele) => TreeArrar(ele))
         this.treeData = NewData
       } 
     }
    },
    async loadList(formData) {
      let param = {};
      if (typeof formData === 'boolean') {
        this.models.pageNum = 1;
        this.models.pageSize = 10;
        if (this.$refs.createSupplier) {
          this.$refs.createSupplier.clearSelected()
        }
      }
      if (typeof formData === 'object') {
         this.models.pageNum = formData.pageNum;
        this.models.pageSize = formData.pageSize;
        if (this.$refs.createSupplier) {
          this.$refs.createSupplier.clearSelected()
        }
      }
      if (
        this.formInline.contactPhone &&
        !checkPhone(this.formInline.contactPhone)
      ) {
        this.$message.error("联系电话输入格式有误");
        return;
      }
      if (this.formInline.email && !checkEmail(this.formInline.email)) {
        this.$message.error("邮箱输入格式有误");
        return;
      }
      if (this.formInline.applyCategoryId&&this.formInline.applyCategoryId.length) {
        param.applyCategoryId = this.formInline.applyCategoryId.join(',')
      }

      if (this.formInline.time && this.formInline.time.length) {
        param.addBlacklistStartTime = this.formInline.time[0]
        param.addBlacklistEndTime = this.formInline.time[1]
      }
        param.removeBlacklistTime = this.formInline.removeBlacklistTime

      param.contactPhone = this.formInline.contactPhone;
      param.email = this.formInline.email;
      param.contactPerson = this.formInline.contactPerson;
      param.blacklistReason = this.formInline.blacklistReason;
      param.name = this.formInline.name;
      param.pageNum = this.models.pageNum
      param.pageSize = this.models.pageSize;
    //  param.queryType = this.findType["pass"];
       param.tag = "3"
      const { code, data } = await supplierPageFind(param);
      if (code == 200) {
        data.list.forEach((v,i) => {
          v.restoreApply = true
          v.supplierId = v.id
          // removeBlacklistTime
          if (v.removeBlacklistTime) {
            const date = new Date(v.removeBlacklistTime);
            // 在 Date 对象上添加 3 年
            date.setFullYear(date.getFullYear() + 3);
            // 将更新后的 Date 对象转换回时间戳（毫秒）
            v.removeBlacklistTime = date.getTime();
          }
        })
        this.tables.tableData = data.list
        this.tables.total = data.total
      }
    },
    reset(formName){
      this.$refs[formName].resetFields();
      this.loadList(true);
    },
    supplierDetailClick(row) {
      this.$refs.createSupplierDetail.openDetail(row,1)
    },
    restoreClick(row) {
        let txt = `确定恢复【${row.name}】为合格供应商`
         this.$confirm(txt, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
         }).then(async () => {
           let param = {}
          param.id = row.id
          const {code} = await supplierOutBlacklist(param);
          if(code === 200){
            this.$message.success("操作成功");
            this.loadList(true);
          }
        }).catch(() => {});
    },
     async dataXlsx() {
      let param = {};
      if (
        this.formInline.contactPhone &&
        !checkPhone(this.formInline.contactPhone)
      ) {
        this.$message.error("联系电话输入格式有误");
        return;
      }
      if (this.formInline.email && !checkEmail(this.formInline.email)) {
        this.$message.error("邮箱输入格式有误");
        return;
      }
      if (this.formInline.applyCategoryId&&this.formInline.applyCategoryId.length) {
        param.applyCategoryId = this.formInline.applyCategoryId.join(',')
      }

      if (this.formInline.time && this.formInline.time.length) {
        param.addBlacklistStartTime = this.formInline.time[0]
        param.addBlacklistEndTime = this.formInline.time[1]
      }
        param.removeBlacklistTime = this.formInline.removeBlacklistTime

      param.contactPhone = this.formInline.contactPhone;
      param.email = this.formInline.email;
      param.contactPerson = this.formInline.contactPerson;
      param.name = this.formInline.name;
      param.pageNum = 1
      param.pageSize = this.tables.total;
    //  param.queryType = this.findType["pass"];
       param.tag = "3"
      const { code, data } = await supplierPageFind(param);
      if (code == 200) {
        let fields = {}
          SUPPLIER_BLACKLIST_LABEL.forEach(v => {
          if (v.type == 'on') {
            fields['index'] = v.label
          } else {
            if (v.prop) {
              fields[v.prop] = v.label
            }
          }
          })
          const entries = Object.entries(fields);
          if (entries.length > 0) {
            const firstEntry = entries.shift();
            entries.push(firstEntry);
          }
        const header = Object.fromEntries(entries);
          const manualWidthColumns = [
            { width: 10 },
            { width: 40 },
            { width: 15 },
            { width: 15 },
            { width: 25 },
            { width: 20 },
            { width: 60 },
            { width: 20 },
            { width: 60 }
          ];

        data.list.forEach((v, i) => {
          v.index = (i + 1)
          if (v.blacklistTime) {
            let time = moment(v.blacklistTime).format("YYYY-MM-DD");
            v.blacklistTime = time
          }
          if (v.removeBlacklistTime) {
            let time = moment(v.removeBlacklistTime).format("YYYY-MM-DD");
            v.removeBlacklistTime = time
          }
        })
       
        if (this.$refs.createSupplier) {
          this.$refs.createSupplier.clearSelected()
          this.$refs.createSupplier.exportXlsx(header,data.list,manualWidthColumns,'黑名单列表')
        }
      }
    }
  }
};
</script>
<style scoped>
.duo-file{
  display: flex;
  flex-wrap: wrap;
}
</style>